<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据表格展示</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#64748B',
            accent: '#10B981',
            neutral: '#F1F5F9',
            dark: '#1E293B'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .table-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .hover-effect {
        @apply transition-all duration-300 ease-in-out;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<div class="container mx-auto px-4 py-12 max-w-7xl">
  <!-- 页面标题 -->
  <header class="mb-10 text-center">
    <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-3">产品销售数据统计</h1>
    <p class="text-secondary text-lg">2024年第三季度销售表现一览</p>
  </header>

  <!-- 表格容器 -->
  <div class="bg-white rounded-xl p-6 table-shadow overflow-hidden">
    <!-- 表格操作栏 -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
      <div class="flex items-center space-x-2">
        <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg hover-effect flex items-center gap-2">
          <i class="fa fa-download"></i> 导出数据
        </button>
        <button class="bg-white border border-gray-300 hover:border-primary text-secondary hover:text-primary px-4 py-2 rounded-lg hover-effect flex items-center gap-2">
          <i class="fa fa-refresh"></i> 刷新
        </button>
      </div>
      <div class="relative w-full md:w-auto">
        <input type="text" placeholder="搜索产品..."
               class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-full md:w-64">
        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-secondary"></i>
      </div>
    </div>

    <!-- 表格 -->
    <div class="overflow-x-auto">
      <table class="w-full min-w-[768px]">
        <!-- 表头 -->
        <thead>
        <tr class="bg-neutral">
          <th class="py-4 px-6 text-left text-secondary font-semibold tracking-wider">
            <div class="flex items-center gap-2">
              <span>产品名称</span>
              <i class="fa fa-sort text-gray-400"></i>
            </div>
          </th>
          <th class="py-4 px-6 text-left text-secondary font-semibold tracking-wider">
            <div class="flex items-center gap-2">
              <span>类别</span>
              <i class="fa fa-sort text-gray-400"></i>
            </div>
          </th>
          <th class="py-4 px-6 text-left text-secondary font-semibold tracking-wider">
            <div class="flex items-center gap-2">
              <span>单价</span>
              <i class="fa fa-sort text-gray-400"></i>
            </div>
          </th>
          <th class="py-4 px-6 text-left text-secondary font-semibold tracking-wider">
            <div class="flex items-center gap-2">
              <span>销量</span>
              <i class="fa fa-sort text-gray-400"></i>
            </div>
          </th>
          <th class="py-4 px-6 text-left text-secondary font-semibold tracking-wider">
            <div class="flex items-center gap-2">
              <span>销售额</span>
              <i class="fa fa-sort-desc text-primary"></i>
            </div>
          </th>
          <th class="py-4 px-6 text-left text-secondary font-semibold tracking-wider">
            <div class="flex items-center gap-2">
              <span>增长率</span>
              <i class="fa fa-sort text-gray-400"></i>
            </div>
          </th>
          <th class="py-4 px-6 text-left text-secondary font-semibold tracking-wider">操作</th>
        </tr>
        </thead>

        <!-- 表格内容 -->
        <tbody class="divide-y divide-gray-200">
        <!-- 行1 -->
        <tr class="hover:bg-gray-50 hover-effect">
          <td class="py-4 px-6">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/1/40/40" alt="智能手表" class="w-10 h-10 rounded-md object-cover">
              <span class="font-medium">智能手表 Pro</span>
            </div>
          </td>
          <td class="py-4 px-6">
            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">智能设备</span>
          </td>
          <td class="py-4 px-6">¥1,299</td>
          <td class="py-4 px-6">2,456</td>
          <td class="py-4 px-6 font-semibold">¥3,180,444</td>
          <td class="py-4 px-6">
                                <span class="text-accent flex items-center gap-1">
                                    <i class="fa fa-arrow-up"></i> 12.5%
                                </span>
          </td>
          <td class="py-4 px-6">
            <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80 hover-effect" title="查看详情">
                <i class="fa fa-eye"></i>
              </button>
              <button class="text-secondary hover:text-secondary/80 hover-effect" title="编辑">
                <i class="fa fa-edit"></i>
              </button>
            </div>
          </td>
        </tr>

        <!-- 行2 -->
        <tr class="hover:bg-gray-50 hover-effect">
          <td class="py-4 px-6">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/20/40/40" alt="无线耳机" class="w-10 h-10 rounded-md object-cover">
              <span class="font-medium">无线降噪耳机</span>
            </div>
          </td>
          <td class="py-4 px-6">
            <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">音频设备</span>
          </td>
          <td class="py-4 px-6">¥899</td>
          <td class="py-4 px-6">3,892</td>
          <td class="py-4 px-6 font-semibold">¥3,509,908</td>
          <td class="py-4 px-6">
                                <span class="text-accent flex items-center gap-1">
                                    <i class="fa fa-arrow-up"></i> 8.3%
                                </span>
          </td>
          <td class="py-4 px-6">
            <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80 hover-effect" title="查看详情">
                <i class="fa fa-eye"></i>
              </button>
              <button class="text-secondary hover:text-secondary/80 hover-effect" title="编辑">
                <i class="fa fa-edit"></i>
              </button>
            </div>
          </td>
        </tr>

        <!-- 行3 -->
        <tr class="hover:bg-gray-50 hover-effect">
          <td class="py-4 px-6">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/96/40/40" alt="笔记本电脑" class="w-10 h-10 rounded-md object-cover">
              <span class="font-medium">轻薄笔记本 Air</span>
            </div>
          </td>
          <td class="py-4 px-6">
            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">电脑设备</span>
          </td>
          <td class="py-4 px-6">¥5,499</td>
          <td class="py-4 px-6">1,254</td>
          <td class="py-4 px-6 font-semibold">¥6,891,746</td>
          <td class="py-4 px-6">
                                <span class="text-accent flex items-center gap-1">
                                    <i class="fa fa-arrow-up"></i> 15.7%
                                </span>
          </td>
          <td class="py-4 px-6">
            <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80 hover-effect" title="查看详情">
                <i class="fa fa-eye"></i>
              </button>
              <button class="text-secondary hover:text-secondary/80 hover-effect" title="编辑">
                <i class="fa fa-edit"></i>
              </button>
            </div>
          </td>
        </tr>

        <!-- 行4 -->
        <tr class="hover:bg-gray-50 hover-effect">
          <td class="py-4 px-6">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/26/40/40" alt="蓝牙音箱" class="w-10 h-10 rounded-md object-cover">
              <span class="font-medium">便携式蓝牙音箱</span>
            </div>
          </td>
          <td class="py-4 px-6">
            <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">音频设备</span>
          </td>
          <td class="py-4 px-6">¥399</td>
          <td class="py-4 px-6">5,632</td>
          <td class="py-4 px-6 font-semibold">¥2,247,168</td>
          <td class="py-4 px-6">
                                <span class="text-red-500 flex items-center gap-1">
                                    <i class="fa fa-arrow-down"></i> 2.1%
                                </span>
          </td>
          <td class="py-4 px-6">
            <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80 hover-effect" title="查看详情">
                <i class="fa fa-eye"></i>
              </button>
              <button class="text-secondary hover:text-secondary/80 hover-effect" title="编辑">
                <i class="fa fa-edit"></i>
              </button>
            </div>
          </td>
        </tr>

        <!-- 行5 -->
        <tr class="hover:bg-gray-50 hover-effect">
          <td class="py-4 px-6">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/60/40/40" alt="智能灯泡" class="w-10 h-10 rounded-md object-cover">
              <span class="font-medium">智能彩光灯泡</span>
            </div>
          </td>
          <td class="py-4 px-6">
            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">智能家居</span>
          </td>
          <td class="py-4 px-6">¥129</td>
          <td class="py-4 px-6">8,945</td>
          <td class="py-4 px-6 font-semibold">¥1,153,905</td>
          <td class="py-4 px-6">
                                <span class="text-accent flex items-center gap-1">
                                    <i class="fa fa-arrow-up"></i> 23.4%
                                </span>
          </td>
          <td class="py-4 px-6">
            <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80 hover-effect" title="查看详情">
                <i class="fa fa-eye"></i>
              </button>
              <button class="text-secondary hover:text-secondary/80 hover-effect" title="编辑">
                <i class="fa fa-edit"></i>
              </button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="flex flex-col md:flex-row justify-between items-center mt-8 gap-4">
      <div class="text-secondary text-sm">
        显示 1 至 5 条，共 24 条记录
      </div>
      <div class="flex items-center gap-1">
        <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 text-secondary hover:border-primary hover:text-primary hover-effect disabled:opacity-50 disabled:cursor-not-allowed" disabled>
          <i class="fa fa-angle-left"></i>
        </button>
        <button class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white">1</button>
        <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:border-primary hover:text-primary hover-effect">2</button>
        <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:border-primary hover:text-primary hover-effect">3</button>
        <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:border-primary hover:text-primary hover-effect">4</button>
        <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:border-primary hover:text-primary hover-effect">5</button>
        <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 text-secondary hover:border-primary hover:text-primary hover-effect">
          <i class="fa fa-angle-right"></i>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 简单的交互脚本 -->
<script>
  // 为表格行添加点击效果
  document.querySelectorAll('tbody tr').forEach(row => {
    row.addEventListener('click', function(e) {
      // 避免点击按钮时触发整行选中效果
      if (!e.target.closest('button')) {
        this.classList.toggle('bg-blue-50');
      }
    });
  });

  // 为刷新按钮添加简单动画
  document.querySelector('button:has(.fa-refresh)').addEventListener('click', function() {
    const icon = this.querySelector('.fa-refresh');
    icon.classList.add('fa-spin');
    setTimeout(() => {
      icon.classList.remove('fa-spin');
    }, 1000);
  });
</script>
</body>
</html>